import { memo, useEffect, useRef } from 'react'
import './index.scss'
import { Tooltip } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';
import { useAppDispatch, useAppSelector } from '../../../../utils/storeHook/storeHook';
import http from '../../../../utils/http';
import api from '../../../../api';
import { clearPlayList, removeMusic, setActMusicInfo } from '../../../../store/modules/musicStore';
import classNames from 'classnames';

const musicToken = import.meta.env.VITE_YUN_MUSIC_TOKEN
const cookie = import.meta.env.VITE_YUN_MUSIC_COOKIE

interface propsT{
    visible: boolean,
    onClose: Function,
}

const PlayList = memo(({visible,onClose}:propsT)=>{
    const detail = useAppSelector(state=>state.music.actMusicInfo)
    const playList = useAppSelector(state=>state.music.playList)
    const dispatch = useAppDispatch()

    const playListRef = useRef<HTMLDivElement>(null)

    async function getMusicUrl(id:string|number){
        const detailRes = await http.post(api.music.getMusicDetail,{token:musicToken,id:id})
        const urlRes = await http.post(api.music.getMusicUrl,{token:musicToken,id:id,cookie:cookie})
        const musicInfo = {
            id:detailRes.data.songs[0].id,
            name:detailRes.data.songs[0].name,
            artist:detailRes.data.songs[0].ar.map((item:any)=>item.name).join('/'),
            coverUrl:detailRes.data.songs[0].al.picUrl,
            time:detailRes.data.songs[0].dt,
            url:urlRes.data.url
        }
        dispatch(setActMusicInfo(musicInfo))
    }

    function handlePlay(id:number|string){
        getMusicUrl(id)
    }

    function handleDelete(e:React.MouseEvent<HTMLDivElement, MouseEvent>,id:number|string){
        e.stopPropagation()
        dispatch(removeMusic(id))
    }

    function handleClearPlayList(){
        dispatch(clearPlayList())
    }

    return (
        <>
            {visible&&<div className="playList_box" ref={playListRef}>
                <div className='playList_box_header'>
                    <Tooltip title="收起" placement='left'>
                        <div className='playList_box_header_hide' onClick={()=>onClose()}>  
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" filter="none">
                                <g>
                                <path d="M24 19H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M24 10H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M8 38H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M8 28H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M8 10L16 15L8 20V10Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path>
                                </g>
                            </svg>
                        </div>
                    </Tooltip>
                    <div className='playList_box_header_title'>
                        播放列表({playList.length})
                        <span title='清空播放列表' onClick={handleClearPlayList}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" filter="none">
                                <g>
                                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
                    </div>
                </div>
                <div className='playList_box_content'>
                    {playList.map((item,index)=>
                    <>
                        <div 
                            className={classNames('playList_box_item',{'playing':item.id===detail?.id})} 
                            key={item.id} 
                            onClick={()=>handlePlay(item.id)}
                        >
                            <div className='playList_box_item_left'>
                                <div className='playList_box_item_index'>{(index + 1).toString().padStart(2,'0')}</div>
                                <div className='playList_box_item_info'>
                                    <div className='playList_box_item_info_title' title={item.name}>
                                        {item.name}
                                    </div>
                                    <div className='playList_box_item_info_artist' title={item.artist}>
                                        {item.artist}
                                    </div>
                                </div>
                            </div>
                            <div className='playList_item_delete' title='移除' onClick={(e)=>handleDelete(e,item.id)}>
                                <DeleteOutlined />
                            </div>
                        </div>
                    </>)}
                </div>
            </div>}
        </>
    )
})

export default PlayList